import 'package:car_map/mode/time_scale.dart';
import 'package:car_map/page/groupingpage/groupingprovide/devicelist_provide.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provide/provide.dart';

class WidgetGroupingTitle extends StatefulWidget{

  final List<TimeScale> timeScale;

  const WidgetGroupingTitle({Key key, this.timeScale}) : super(key: key);

  @override
  _widgetGroupingTitleState createState()=>_widgetGroupingTitleState();
}

class _widgetGroupingTitleState extends State<WidgetGroupingTitle>{

  int currendIndex=0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: ScreenUtil().setWidth(750),
      height: ScreenUtil().setHeight(80.0),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: Colors.black12,
            width: 0.5
          )
        )
      ),
      child:ListView.builder(itemBuilder: (context,index){
        return itemTitle(index);
      },itemCount: widget.timeScale.length,shrinkWrap: true,scrollDirection: Axis.horizontal,)
    );
  }

  Widget itemTitle(index){
    return InkWell(
      onTap: (){
       setState(() {
         currendIndex=index;
         Provide.value<DeviceListProvide>(context).updateDeviceStatus('${widget.timeScale[index].index}');
       });
      },
      child: Container(
        padding: EdgeInsets.only(top: 10.0,bottom: 10.0),
        width: ScreenUtil().setWidth(180.0),
        alignment: Alignment.center,
        child: Text(
          '${widget.timeScale[index].title}',
          style: TextStyle(
              color: currendIndex==index?Colors.blue:Colors.black
          ),
        ),
      ),
    );
  }

}